<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"">
<title>The Registration Page</title>

	<script type="text/javascript">  
	$(function(){         
	    $('#kaptchaImage').click(function () {//generate kaptcha image
	     $(this).attr('src', 'kaptcha/getKaptcha.do?' + Math.floor(Math.random()*100) );  
	     event.cancelBubble=true;  
	    });  
	});
	  
	function changeCode() {  
	    $('#kaptchaImage').attr('src', 'kaptcha/getKaptcha.do?' + Math.floor(Math.random()*100) );  
	    event.cancelBubble=true;  
	}  
	</script>
</head>

<body>	
	<form:form action="user/registry/" method="post"
		modelAttribute="userInfoBasicModel">
		<table id="registerTable" class="lrTable">
			<tr>
				<td width="200px">姓名:</td>
				<td width="200px"><form:input path="name" datatype="/^\S{2,18}$/" nullmsg="请输入用户名！" errormsg="昵称为2~18个字符！" /></td>
				<td width="200px"><div class="Validform_checktip">昵称为2~18个字符</div></td>
			</tr>
			<tr>
				<td>邮箱:</td>
				<td><form:input path="email" datatype="e" nullmsg="请输入您常用的邮箱！" errormsg="请输入有效邮箱地址！" /></td>
				<td><div class="Validform_checktip">输入您正确的邮箱</div></td>
			</tr>
			<tr>
				<td>密码:</td>
				<td><form:password path="passwd" datatype="/^\w{6,16}$/" nullmsg="请设置密码！" errormsg="密码为6~16个字符(字母、数字)！" /></td>
				<td><div class="Validform_checktip">密码为6~16个字符(字母、数字)</div></td>
			</tr>
			<tr>
				<td>确认密码：</td>
				<td><input type="password" datatype="*" recheck="passwd" nullmsg="请再输入一次密码！" errormsg="两次输入密码需一致！" /></td>
				<td><div class="Validform_checktip">两次输入密码需一致</div></td>
			</tr>
			<tr>
				<td>性别:</td>
				<td>Male: <form:radiobutton path="sex" value="1" datatype="*" nullmsg="请选择性别！" errormsg="请选择性别！" /><br>
					Female: <form:radiobutton path="sex" value="0" /></td>
				<td><div class="Validform_checktip">请选择性别</div></td>
			</tr>
			<tr>
				<td>生日:</td>
				<td><form:input path="birthday" readonly="true" value="1990-01-01" /></td>
				<td><div class="Validform_checktip">请选择您的出生年月</div></td>
			</tr>
			<tr>
				<td>学校:</td>
				<td><form:input path="school" datatype="*" nullmsg="请填写您所在的学校！" /></td>
				<td><div class="Validform_checktip">请填写您所在的学校</div></td>
			</tr>
			<tr>
				<td>验证码:</td>
				<td><img src="kaptcha/getKaptcha.do" id="kaptchaImage"><a href="javascript:changeCode()"><img src="resources/images/refresh.png" /></a><br />
					<input name="kaptcha" type="text" id="kaptcha" datatype="s4-4" nullmsg="请输入上图中的四位验证码！" errormsg="请正确输入！" />
				</td>
				<td><div class="Validform_checktip">请输入上图中的四位验证码</div></td>
			</tr>
			<tr>
				<td colspan="3" align="center"><input type="submit" value="注册"></td>
			</tr>
		</table>
	</form:form>
<script type="text/javascript">
$("#birthday").datepicker({
	yearRange: "-25:+0",
	showOtherMonths: true,
    selectOtherMonths: true,
	dateFormat: "yy-mm-dd",
	changeMonth:true,
	changeYear:true,
	monthNamesShort: [ "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月" ],
	dayNamesMin: [ "日", "一", "二", "三", "四", "五", "六" ]
});
var success=0;

$("#userInfoBasicModel").Validform({
	tiptype:2,
	showAllError:true,
	callback:function(form){
		var stateDialog=art.dialog({
			content:"请稍等一会！",
			lock:true,
			ok:function(){
				if(success==1)
				{
					window.location.reload();
				}
			},
			close:function(){
				if(success==1)
				{
					window.location.reload();
				}
			}
		});
		
		$('#userInfoBasicModel').ajaxSubmit(function(data){
			var content;
			switch(data)
			{
			case "SUCCESS":
				content="成功";
				success=1;
				break;
			case "FORM_FIELD_FORMAT_INCORRECT":
				content="表单数据格式不正确";
				break;
			case "FORM_KAPTCHA_INCORRECT":
				content="表单验证码不正确";
				break;
			case "REGISTER_EMAIL_REPEAT":
				content="email已被注册";
				break;
			default:
				content="未知错误";
				break;
			}
			stateDialog.content(content);
		});
		return false;
	}
});
</script>
</body>
</html>